import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtCharts

Rectangle {
    Layout.fillWidth: true
    Layout.fillHeight: true

    ChartView {
        id: chartView
        title: "面积图交互"
        titleFont.bold: true
        titleFont.pointSize: 14

        anchors.fill: parent
        antialiasing: true

        ValueAxis {
            id: axisX
            min: 1; max: 4
        }
        ValueAxis {
            id: axisY
            min: 0; max: 100
        }

        AreaSeries {
            id: interactiveArea
            axisX: axisX
            axisY: axisY
            name: "area"
            color: "#4FC3F7"
            borderColor: "#1296FF"
            opacity: 0.7

            upperSeries: LineSeries {
                XYPoint { x: 1; y: 60 }
                XYPoint { x: 2; y: 50 }
                XYPoint { x: 3; y: 70 }
                XYPoint { x: 4; y: 40 }
            }
            lowerSeries: LineSeries {
                XYPoint { x: 1; y: 30 }
                XYPoint { x: 2; y: 20 }
                XYPoint { x: 3; y: 40 }
                XYPoint { x: 4; y: 15 }
            }

            // 悬停高亮
            onHovered: (point, state) => {
                           interactiveArea.opacity = state ? 0.95 : 0.7
                           if (!state) {
                               // 鼠标离开不显示坐标
                               tooltip.visible = false
                               toolpos.visible = false
                           }
                       }

            // 点击事件
            onClicked: (point) => {
                           // 在点击坐标上方显示提示框
                           let pos = chartView.mapToPosition(Qt.point(point.x, point.y))
                           tooltip.x = pos.x - tooltip.width/2
                           tooltip.y = pos.y - 40
                           tooltip.visible = true

                           // 在点击处显示圆点
                           toolpos.x = pos.x - toolpos.width/2
                           toolpos.y = pos.y - toolpos.height/2
                           toolpos.visible = true

                           // 展示坐标信息
                           tooltext.text = `(${point.x.toFixed(2)},${point.y.toFixed(2)})`
                       }
        }
    }

    // 自定义提示框
    Rectangle {
        id: tooltip
        visible: false
        width: 80
        height: 30
        color: "transparent"
        border.color: "#1296FF"
        border.width: 2
        radius: 4

        Text {
            id: tooltext
            anchors.centerIn: parent
            color: "red"
            font.pixelSize: 12
            padding: 4
        }
    }

    // 显示点击坐标
    Rectangle {
        id: toolpos
        visible: false
        width: 8
        height: 8
        radius: 4
        color: "red"
    }

    // 按钮
    Button {
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        text: "添加数据"
        onClicked: {
            let lastX = interactiveArea.upperSeries.count > 0 ?
                    interactiveArea.upperSeries.at(interactiveArea.upperSeries.count - 1).x : -1
            let newX = lastX + 1
            interactiveArea.upperSeries.append(newX, 30 + Math.random() * 30)
            interactiveArea.lowerSeries.append(newX, 10 + Math.random() * 10)
            axisX.max = newX + 1
        }
    }
}
